<template>
  <div class="new">
    <div class="title tanxin">
      <div class="title_l tanxin">
        <img src="../../assets/images/quan.png" alt="" />
        <h2>榜单</h2>
      </div>
      <div class="more">
        <span @click="checkAll">更多</span>
        <img src="../../assets/images/jiantou.png" alt="" />
      </div>
    </div>
    <!-- 飙升榜 -->
    <div class="content tanxin">
      <dl class="blk">
        <dt class="top">
          <div class="img">
            <img src="../../assets/images/music_bg/bang1.jpg" alt="" />
            <i title="飙升榜" class="cover"></i>
          </div>
          <div class="msk">
            <h3 title="飙升榜">飙升榜</h3>
            <div class="icon">
              <i title="播放" class="play" @click="play1"></i>
              <i title="收藏" class="sub"></i>
            </div>
          </div>
        </dt>
        <dd>
          <ol>
            <li v-for="(item, index) in biaosheng" :key="index">
              <div class="singName ellipsis">
                <span>{{ index + 1 }}</span>
                <a :title="item.name" class="name" @click="$router.push(`/songlist/${item.id}`)">{{ item.name }}</a>
              </div>
              <div class="show">
                <i title="播放" class="play" @click="playmusic(item)"></i>
                <i title="添加到播放列表" class="add"></i>
                <i title="收藏" class="sub"></i>
              </div>
            </li>
          </ol>
          <div class="more" @click="checkAll">查看全部></div>
        </dd>
      </dl>
      <!-- 新歌榜 -->
      <dl class="blk">
        <dt class="top">
          <div class="img">
            <img src="../../assets/images/music_bg/bang2.jpg" alt="" />
            <i title="新歌榜" class="cover"></i>
          </div>
          <div class="msk">
            <h3 title="新歌榜">新歌榜</h3>
            <div class="icon">
              <i title="播放" class="play"  @click="play2"></i>
              <i title="收藏" class="sub"></i>
            </div>
          </div>
        </dt>
        <dd>
          <ol>
            <li v-for="(item, index) in newsong" :key="index">
              <div class="singName ellipsis">
                <span>{{ index + 1 }}</span>
                <a :title="item.name" class="name" @click="$router.push(`/songlist/${item.id}`)">{{ item.name }}</a>
              </div>
              <div class="show">
                <i title="播放" class="play" @click="playmusic(item)"></i>
                <i title="添加到播放列表" class="add"></i>
                <i title="收藏" class="sub"></i>
              </div>
            </li>
          </ol>
          <div class="more" @click="checkAll1">查看全部></div>
        </dd>
      </dl>
      <!-- 原创榜 -->
      <dl class="blk">
        <dt class="top">
          <div class="img">
            <img src="../../assets/images/music_bg/bang3.jpg" alt="" />
            <i title="原创榜" class="cover"></i>
          </div>
          <div class="msk">
            <h3 title="原创榜">原创榜</h3>
            <div class="icon">
              <i title="播放" class="play" @click="play3"></i>
              <i title="收藏" class="sub"></i>
            </div>
          </div>
        </dt>
        <dd>
          <ol>
            <li v-for="(item, index) in yuanchuang" :key="index">
              <div class="singName ellipsis">
                <span>{{ index + 1 }}</span>
                <a :title="item.name" class="name" @click="$router.push(`/songlist/${item.id}`)">{{ item.name }}</a>
              </div>
              <div class="show">
                <i title="播放" class="play" @click="playmusic(item)"></i>
                <i title="添加到播放列表" class="add"></i>
                <i title="收藏" class="sub"></i>
              </div>
            </li>
          </ol>
          <div class="more" @click="checkAll2">查看全部></div>
        </dd>
      </dl>
    </div>
    <!-- 音乐播放器 -->
    <MusicPlay :ids="ids" :imgUrl="imgUrl" :isPlay="isPlay" />
  </div>
</template>

<script>
import MusicPlay from "@/components/MusicPlay.vue";
import { BdApi, reqAllList } from "@/request/api";
export default {
  data() {
    return {
      listArr: [],
      biaosheng: [],
      newsong: [],
      yuanchuang: [],
      id: 19723756,
      id1: 3779629,
      id2: 2884035,
      ids: 0,
      imgUrl: "https://img2.baidu.com/it/u=1611088966,2458167776&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
      isPlay: false,
    };
  },
  components: {
      MusicPlay,
  },
  created() {
    // 榜单列表
    BdApi().then((res) => {
      // console.log(res);
      this.listArr = res.data.list.slice(0, 3);
    });
    // 根据id获取 歌曲列表数据
    reqAllList(this.id).then((res) => {
      // console.log(res);
      this.biaosheng = res.data.songs.slice(0, 10);
    });
    reqAllList(this.id1).then((res) => {
      // console.log(res);
      this.newsong = res.data.songs.slice(0, 10);
    });
    reqAllList(this.id2).then((res) => {
      // console.log(res);
      this.yuanchuang = res.data.songs.slice(0, 10);
    });
  },
  methods: {
    checkAll() {
      this.$router.push(`/discover/toplist?id=${this.id}`);
    },
    checkAll1() {
      this.$router.push(`/discover/toplist?id=${this.id1}`);
    },
    checkAll2() {
      this.$router.push(`/discover/toplist?id=${this.id2}`);
    },
    playmusic(item) {
      this.ids = item.id;
      this.imgUrl = item.al.picUrl;
      this.isPlay = true;
    },
    play1() {
      this.ids = this.biaosheng[0].id;
      this.imgUrl = this.biaosheng[0].al.picUrl;
      this.isPlay = true;
    },
    play2() {
      this.ids = this.newsong[0].id;
      this.imgUrl = this.newsong[0].al.picUrl;
      this.isPlay = true;
    },
    play3() {
      this.ids = this.yuanchuang[0].id;
      this.imgUrl = this.yuanchuang[0].al.picUrl;
      this.isPlay = true;
    },
  }
};
</script>
 
<style lang = "less" scoped>
@import "../../assets/base.less";
.new {
  .title {
    height: 35px;
    border-bottom: 2px solid @red;
    margin: 20px 0;
    display: flex;
    align-items: center;
    .title_l {
      img {
        width: 15px;
        height: 15px;
        margin: auto;
        padding: 0 10px;
      }
      h2 {
        font-size: 20px;
      }
    }
    .more {
      span {
        cursor: pointer;
        font-size: 12px;
        color: #666666;
        &:hover {
          text-decoration: underline;
        }
      }
      img {
        margin: auto;
        padding: 0 5px;
      }
    }
  }
  .content {
    .blk {
      width: 240px;
      border: 1px solid #d2d2d2;
      .top {
        background: #f4f4f4;
        display: flex;
        .img {
          position: relative;
          padding: 20px 0 20px 20px;
          img {
            width: 100px;
            height: 100px;
          }
        }
        .cover {
          position: absolute;
          top: 20px;
          left: 20px;
          height: 100px;
          width: 100px;
          background: url("../../assets/images/public/coverall.png") no-repeat -0px -40px;
          z-index: 10;
          cursor: pointer;
        }
        .msk {
          cursor: pointer;
          margin: 40px 0 0 10px;
          font-size: 14px;
          color: @black;
          font-weight: bold;
          img {
            margin-right: 10px;
            margin-top: 10px;
          }
          .icon {
            i {
              margin: 10px 10px 0 0;
            }
            .play {
              width: 23px;
              height: 23px;
              display: inline-block;
              background: url("@/assets/images/public/index.png") no-repeat;
              background-position: -267px -205px;
              &:hover {
                cursor: pointer;
                background-position: -267px -235px;
              }
            }
            .sub {
              width: 23px;
              height: 23px;
              display: inline-block;
              background: url("@/assets/images/public/index.png") no-repeat;
              background-position: -300px -205px;
              &:hover {
                cursor: pointer;
                background-position: -300px -235px;
              }
            }
          }
        }
      }
    }
    dd {
      ol {
        li {
          cursor: pointer;
          font-size: 12px;
          padding: 10px 20px 10px 30px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          &:hover {
            .singName {
              width: 50%;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            .show {
              width: 50%;
              display: block;
            }
          }
          span {
            font-size: 16px;
            color: #666666;
            padding-right: 5px;
          }
          /* 设置前三个样式 */
          &:nth-child(-n + 3) span {
            color: @red;
          }
          &:nth-child(odd) {
            background: #e8e8e8;
          }
          &:nth-child(even) {
            background: #f4f4f4;
          }
          .name {
            width: 170px;
            &:hover {
              text-decoration: underline;
            }
          }
          .show {
            width: 81px;
            display: none;
            .play {
              width: 17px;
              height: 17px;
              margin-right: 10px;
              display: block;
              float: left;
              background: url("../../assets/images/public/table.png") no-repeat;
              background-position: -0px -103px;
              &:hover {
                background-position: -0px -128px;
              }
            }
            .add {
              width: 17px;
              height: 17px;
              margin-right: 10px;
              display: block;
              float: left;
              background: url("../../assets/images/public/icon.png") no-repeat;
              background-position: 0 -698px;
              &:hover {
                background-position: -22px -698px;
              }
            }
            .sub {
              width: 17px;
              height: 17px;
              margin-right: 10px;
              display: block;
              float: left;
              background: url("../../assets/images/public/table.png") no-repeat;
              background-position: 0 -172px;
              &:hover {
                background-position: -20px -172px;
              }
            }
          }
        }
      }
      .more {
        cursor: pointer;
        display: flex;
        justify-content: right;
        background: #e8e8e8;
        font-size: 12px;
        padding: 10px 30px 10px 0;
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}
</style>